<template>
    <div  class="form-horizontal">

        反正有一个
        <div v-for="(item,index) in myInputDefines"  :key="item.key">
            <template v-if="item.elementType === 'input' ">
                <input-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
            </template>
            <template v-else-if="item.elementType === 'textarea' " >
                <textarea-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
            </template>
            <template v-else-if="item.elementType === 'radio' ">
                <radio-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
            </template>
            <template v-else-if="item.elementType === 'select' ">
                <select-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
            </template>
            <template v-else-if="item.elementType === 'formObject' ">
                <form-element :inputDefine="item" :formData="myFormData[item.key]" :isRoot="false" @dataChange="dataChangeObject"/>
            </template>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button  class="btn btn-default" @click="submit();">提交</button>

                &nbsp;
                <template v-if="isRoot == false">
                    <button  class="btn btn-default" @click="addElement();">添加子元素</button>
                </template>
            </div>
        </div>
    </div>
</template>


<script>
    import InputElement from './InputElement.vue'
    import TextareaElement from './TextareaElement.vue'
    import RadioElement from './RadioElement.vue'
    import SelectElement from './SelectElement.vue'

    var FormObject=Vue.extend({
            data(){
                  var parentInputDefine=this.inputDefine;
                  var myFormData=this.formData;
                  var myInputDefines=parentInputDefine.inputDefines;
                  for(var index=0;index<myInputDefines.length;index++){
                    var item=myInputDefines[index];
                    if(myFormData[item['key']]==null){
                        myFormData[item['key']]=item.defValue;
                    }
                  }
                  return{
                        parentInputDefine:parentInputDefine,
                        myInputDefines: myInputDefines,
                        myFormData:myFormData
                  }
            },
            created:function(){
             console.log('i am created');
            },
            components:{
                 'input-element':InputElement,
                 'textarea-element':TextareaElement,
                 'radio-element':RadioElement,
                 'select-element':SelectElement
            },
            methods:{
               submit:function(){
                console.log(this.myFormData);
               },
               dataChange:function(inputDefine,dataInfo){
                    this.myFormData[inputDefine.key]=dataInfo['newValue'];
                    var dataInfo={"newValue":this.myFormData}
                    this.$emit('dataChange',this.parentInputDefine,dataInfo);
                },
                addElement:function(){
                     var time=new Date().getTime();
                     this.myInputDefines.push({key:"key_new"+time,name:"key1"+time,displayName:"新增了key", elementType:"input",defValue:"2121"});
                }
            },
            props:{
              inputDefine:{
                type:Object,
                required: true
              },
              formData:{
                 type:Object,
                 required: true
              },
              isRoot:{
                type:Boolean,
                 required: false
              }
            }


       });

    Vue.component('form-element',FormObject);
    export default FormObject;
</script>
